<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>系统登录 - 超市账单管理系统</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="./js/jquery-3.5.1.js"></script>
    <script>
      $(function () {
        /**
         * 1、找到表单元素，监听表单提交事件
         * @date 2021-03-22
         */
        $('.loginForm').submit(async function (e) {
          e.preventDefault()
          let num = checkUsername() & checkPassword()
          if (num !== 1) {
            //表单验证不通过，不发送请求
            return
          }
          //4、执行登录操作,await表示等待异步执行的结果，只能在async修饰的函数中
          let res = await login()
          console.log(res)
          if (res.code !== 200) {
            return alert(res.msg)
          }
          sessionStorage.setItem('USER_LOGIN', JSON.stringify(res))
          location = 'welcome.html'
        })

        /**
         * 2、验证用户名
         * @date 2021-03-22
         * @returns {any}
         */
        function checkUsername() {
          let value = $('#user').val()
          if (!value) {
            alert('用户名不能为空')
            return false
          }
          //let reg = /(^[\u4e00-\u9fa5]{2,16}$)|(^[a-z]{2,16}$)/
          let reg = /^[a-zA-Z\d_]{2,16}$/
          if (!reg.test(value)) {
            alert('用户名2-16位')
            return false
          }
          return true
        }

        /**
         * 3、验证密码
         * @date 2021-03-22
         * @returns {any}
         */
        function checkPassword() {
          let value = $('#mima').val()
          if (!value) {
            alert('密码不能为空')
            return false
          }
          if (value.length < 6) {
            alert('密码最低6位')
            return false
          }
          return true
        }

        /**
         * 5、用户登录函数
         * @date 2021-03-22
         * @returns {Promise} object
         */
        function login() {
          return new Promise(function (resolve, reject) {
            $.ajax({
              url: 'http://146.56.230.35:3007/users/login',
              type: 'POST',
              data: {
                username: $('#user').val(),
                userPassword: $('#mima').val(),
              },
              success(res) {
                resolve(res)
              },
              error(err) {
                reject(err)
              },
            })
          })
        }
      })
    </script>
  </head>
  <body class="login_bg">
    <section class="loginBox">
      <header class="loginHeader">
        <h1>超市账单管理系统</h1>
      </header>
      <section class="loginCont">
        <form class="loginForm" action="https://www.baidu.com">
          <div class="inputbox">
            <label for="user">用户名：</label>
            <input
              id="user"
              type="text"
              name="username"
              placeholder="请输入用户名"
            />
          </div>
          <div class="inputbox">
            <label for="mima">密码：</label>
            <input
              id="mima"
              type="password"
              name="password"
              placeholder="请输入密码"
            />
          </div>
          <div class="subBtn">
            <input type="submit" value="登录" />
            <input type="reset" value="重置" />
          </div>
        </form>
      </section>
    </section>
  </body>
</html>
